<template>
  <div class="home-nav">
    <div class="nav-item"
      v-for="(item,index) of navItems"
      :key="index">
      <a :href="item.linkUrl" class="link-url">
        <img :src="item.picUrl" alt="" class="pic-url">
      </a>
      <p class="nav-item-name">{{item.text}}</p>
    </div>
  </div>
</template>
<script>
import { navItems } from './config.js'
export default {
  name: 'homeNav',
  data () {
    return {
      navItems: []
    }
  },
  created () {
    this.navItems = navItems
  }
}
</script>
<style lang="stylus" scoped>
.home-nav
  display flex
  flex-wrap wrap
  padding-top 10px
  .nav-item
    width 20%
    padding-bottom 10px
    .link-url
      height 0
      width 80%
      display block
      padding-bottom 80%
      margin 0 auto 10px
      .pic-url
        width 100%
    .nav-item-name
      text-align center

</style>
